<template>
  <div class="recommend_container">
    <!-- 轮播图 -->
    <div class="carousel">
      <div class="swiper">
        <el-carousel :interval="4000" type="card" height="240px">
          <el-carousel-item v-for="(item, index) in bannerData" :key="index">
            <img :src="item.imageUrl" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 推荐歌单  -->
    <div class="recommendMusic">
      <h3>推荐歌单</h3>
      <my-list-card
        :listCardData="musicList"
        @clickListCardItem="clickListCardItem"
      ></my-list-card>
    </div>
  </div>
</template>

<script>
import MyListCard from "@/components/listCard/ListCard.vue";
export default {
  name: "MyRecommend",
  components: {
    MyListCard,
  },
  data() {
    return {
      // 获取banner数据
      bannerData: [],
      //   获取歌曲封面数据
      musicList: [],
    };
  },
  created() {
    this.getBannerData();
    this.getMusicList();
  },
  methods: {
    //   请求轮播图图片
    async getBannerData() {
      const { data: res } = await this.$http("/banner");
      this.bannerData = res.banners;
    },
    // 请求歌曲封面前十个
    async getMusicList() {
      const { data: res } = await this.$http("/personalized", { limit: 10 });
      this.musicList = res.result;
    },
    // 点击歌单封面回调
    clickListCardItem(id) {
      console.log(id);
      this.$router.push({ name: "musiclistdetail", params: { id } });
    },
  },
};
</script>

<style scoped >
.swiper {
  margin: 0 auto;
  width: 80%;
}

.el-carousel__item {
  border-radius: 10px;
}

.el-carousel__item img {
  height: 100%;
}
.recommendMusic {
  margin: 30px 20px;
  height: 1000px;
}
.recommendMusic h3 {
  font-size: 25px;
  margin-left: 73px;
}
</style>